/* JS for tab "homepage" Visual Narrative Strategies panel & Editorial Layers */

class Homepage_Panel {

    constructor (btn_json_url, panel_title, btn_name_tag_template, panel_name) {
        this._btn_json_url = btn_json_url + "";
        this._panel_title = panel_title + "";
        this._btn_name_tag_template = btn_name_tag_template + "";
        this._panel_name  = panel_name + "";
        this._btn_queue = [];  // save btn items
        if(this._btn_json_url.substring(this._btn_json_url.length-5) !== ".json") {
            console.error("Please check your URL format (.JSON)!");
            return ;
        }
    }

    _createPanel (extraNode_html, extraClass_toA_arr, extraAttribute_toA) {
        let panel_node = document.createElement("div");
        let panel_title_html = `<h3 class="sidebar-panel-title"${this._panel_title}</h3>`;
        let panel_group_node = document.createElement("div");

        panel_node.classList.add("sidebar-panel");
        panel_node.setAttribute("id", this._panel_name.concat("-panel"));
        panel_group_node.classList.add("sidebar-panel-group");

        $.getJSON(this._btn_json_url, json => {

            json.forEach((item, i, jsonArr) => {
                let btn_node = this._createButton(item, extraNode_html, extraClass_toA_arr, extraAttribute_toA);
                this._appendTo_queue(btn_node); // append btn to panel queue
            });
        });

        this._btn_queue.forEach((btn_node, i, btn_queue) => panel_group_node.appendChild(btn_node));
        panel_node.innerHTML = panel_title_html;
        panel_title_html.appendChild(panel_group_node);
        return panel_node;
    }

    _createButton (json_item, extraNode_html, extraClass_toA_arr, extraAttribute_toA) {
        json_item = json_item || {};

        if((typeof json_item !== "object") 
            || (typeof extraNode_html !== "string")
            || !(extraClass_toA_arr instanceof Array)
            || (typeof extraAttribute_toA !== "object")
        ) {
            console.error("Parameter(s) error! Button creation failed.");
            return document.createElement("a");
        }

        let btn_node = document.createElement("div");
        let btn_symbol_html = `<span class="${this._panel_name}-btn-symbol"></span>`;
        let btn_text_html = `<span class="${this._panel_name}-btn-text">${this._get_btn_template(json_item)}</span>`;

        btn_node.classList.add("sidebar-btn", this._panel_name.concat("-btn"));
        if(extraClass_toA_arr) {
            extraClass_toA_arr.forEach((class_name, i, class_arr) => {
                if(typeof class_name != "string") {
                    return false;
                }

                btn_node.classList.add(class_name);
            });
        }
        for (let attr in extraAttribute_toA) {
            let value = extraAttribute_toA[attr];
            if(typeof value !== "string") continue;
            value = value || "";
            if(Object.keys(json_item).indexOf(value) > -1) {
                value = json_item[value];
            }

            btn_node.setAttribute(attr, value);
        }

        btn_node.innerHTML = btn_symbol_html + btn_text_html + extraNode_html;
        return btn_node;
    }

    // deal with single button name template
    // this._btn_name_tag = "${regex01:Comparison} (${regex02:8})"
    _get_btn_template (json_item = {}) {
        let btn_name_pairs = this._btn_name_tag_template;
        btn_name_pairs.replace(Homepage_Panel.btn_name_regex, (all_match, match_inner, i) => {
            if(Object.keys(json_item).indexOf(match_inner) > -1) {
                return json_item[match_inner];
            }
            return "tag_" + i;
        });

        return btn_name_pairs;
    }

    _appendTo_queue (btn_node) {
        if(!(btn_node instanceof HTMLElement)) {
            console.error("This button item is not a HTML Element!");
            return false;
        }
        this._btn_queue.push(btn_node);
    }

    _bindEvents () {

    }
}

Homepage_Panel.btn_name_regex = /\$\{(.*?)\}/gm;

Homepage_Panel.prototype.appendTo = function (parentNode, extraNode_html, extraClass_toA_arr, extraAttribute_toA) {
    extraNode_html = extraNode_html || "";
    extraClass_toA_arr = extraClass_toA_arr || [];
    extraAttribute_toA = extraAttribute_toA || {};
    if(!(parentNode instanceof HTMLElement)
        || (typeof extraNode_html !== "string")
        || !(extraClass_toA_arr instanceof Array)
        || (typeof extraAttribute_toA !== "object")
    ) {
        console.error("Parameter(s) error! Panel creation failed.");
        return false;
    }

    this._panel_node = this._createPanel(extraNode_html, extraClass_toA_arr, extraAttribute_toA);
    this._panel_node._bindEvents();

    parentNode.appendChild(this._panel_node);
    return true;
}


 /**
  *  create "Visual Narrative Strategies" panel 
  * 
  *  Example:
  * <a href="#" class="sidebar-btn scrollSpy-btn default">
        <span class="scrollSpy-btn-symbol"></span>
        <span class="scrollSpy-btn-text">Comparison (8)</span>
        <span class="scrollSpy-btn-stop"></span>
    </a>
  * */
const homepage_vns_url = "../json/vns_collection.json";
const vns_panel_title = "Visual Narrative Strategies";
const vns_btn_name_template = "${VNS_tag} (${VNS_num})";
const vns_panel_name = "scrollSpy";
let VNS_panel = new Homepage_Panel(homepage_vns_url, vns_panel_title, vns_btn_name_template, vns_panel_name);

  /**
  *  create "Editorial Layers" panel 
  * 
  *  Example:
  * <a class="sidebar-btn filter-btn active">
        <span class="filter-btn-symbol"></span>
        <span class="filter-btn-text">Elements of Visualization</span>
    </a>
  * */
const homepage_el_url = "../json/el_collection.json";
const el_panel_title = "Editorial Layers";
const el_btn_name_template = "${EL_tag}";
const el_panel_name = "filter";
let EL_panel = new Homepage_Panel(homepage_el_url, el_panel_title, el_btn_name_template, el_panel_name);

export {
    VNS_panel as VNS_panel,
    EL_panel as EL_panel
};
